// 订单区域样式（单行显示版）
@primary-color: #ff2442; // 主色调
@text-color: #333333;    // 文字主色
@text-gray: #666666;     // 次要文字色
@light-bg: #f8f5ec;      // 背景色
@border-radius: 12px;    // 圆角

.order-view {
  background-color: #fff;
  border-radius: @border-radius;
  padding: 24rpx;
  margin: 16rpx 0;
  //box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  // 标题样式
  .title {
    padding: 0rpx 0 20rpx;

    text {
      font-size: 32rpx;
      font-weight: 600;
      color: @text-color;
    }
  }

  // 订单状态容器（关键：强制单行显示）
  .order-info-view {
    display: flex;
    justify-content: space-around; // 均匀分布
    align-items: center;           // 垂直居中
    padding: 20rpx 0;
    width: 100%;                   // 占满宽度
    overflow: hidden;              // 隐藏溢出内容（避免挤压）
    white-space: nowrap;           // 禁止容器内换行
  }

  // 单个状态项（确保不换行）
  .order-info-view-item {
    display: inline-flex;          //  inline-flex 配合不换行
    flex-direction: column;
    align-items: center;
    padding: 15rpx 10rpx;
    flex: 1;                       // 平均分配宽度
    min-width: 0;                  // 允许内容压缩（避免溢出）
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;           // 禁止自身内容换行

    // 图标样式
    .iconfont {
      font-size: 44rpx;
      margin-bottom: 10rpx;
      color: @text-gray;
      transition: color 0.2s ease;
    }

    // 文字样式
    .order-title {
      font-size: 24rpx;
      color: @text-gray;
      transition: color 0.2s ease;
      overflow: hidden;            // 文字过长时隐藏（可选）
      text-overflow: ellipsis;     // 超出显示省略号（可选）
    }

    // 选中/ hover 效果
    //&:hover,
    //&.active {
    //  .iconfont,
    //  .order-title {
    //    color: @primary-color;
    //  }
    //}
  }
}